<template>
    <div v-show="msgStore.list.length>0" class="footer-box">
        <button class="delAll" @click="delAll()">
            <span class="text">删除全部</span>
            <img src="@/icon/icons8-trash-50.png" alt="删除" class="del-icon">
        </button>
    </div>
</template>

<script setup>
import { useMsgStore } from '@/stores/msgStores'
const msgStore = useMsgStore()

// 底部删除函数
const delAll = () => {
    msgStore.delAll()
}
</script>

<style scoped>
    .footer-box {
        display: flex;
        justify-content: right;
        margin: 0 auto;
        width: 300px;
    }

    .footer-box .delAll {
        display: inline-flex;
        text-align: center;
        gap: 5px;
        font-size: 8px;
        padding: 5px;
        cursor: pointer;
        border: none;
        transition: all 0.3s ease;
    }

    .footer-box .delAll:hover{
        transform: scale(1.1);
    }

    .footer-box .delAll .text {
        color: gray;
    }

    .footer-box .delAll .del-icon {
        width: 10px;
        height: 10px;
    }
</style>